<template>
    <field v-bind="$props">
        <select class="ui dropdown" :class="{fluid}" :value="value" @input="evt => {this.$emit('input', evt.target.value)}">
            <option :value="option[valueField]" :key="option[valueField]" v-for="option in options" v-text="option[nameField]"></option>
        </select>
    </field>
</template>


<script>
import Field from './Field'

export default {
    name: 'select-field',
    props: {
        ...Field.props,
        fluid: {
            required: false,
            type: Boolean,
        },
        options: {
            type: Array,
            required: true,
        },
        nameField: {
            type: String,
            default: 'name',
        },
        valueField: {
            type: String,
            default: 'value',
        }
    },
}
</script>
